<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <!--省市区级联组件-->
      <el-form-item label="省" prop="province">
        <el-select v-model='queryParams.province' filterable placeholder="请选择省" clearable   class="w_200">
          <el-option v-for='(temp,index) in mixinsProvinceList' :value="temp.name" :key='index' :label="temp.name"
                     @click.native='mixinsProvinceChange(temp.code)'/>
        </el-select>
      </el-form-item>


      <el-form-item label="市" prop="city">
        <el-select v-model='queryParams.city' filterable placeholder="请选择市(请先选择省)" clearable   class="w_200">
          <el-option v-for='(temp,index) in mixinsCityList' :value="temp.name" :key='index' :label="temp.name"
                     @click.native='mixinsCityChange(temp.code)'/>
        </el-select>
      </el-form-item>


      <el-form-item label="区" prop="area">
        <el-select v-model='queryParams.area' filterable placeholder="请选择区/县(请先选择市)" clearable   class="w_200">
          <el-option v-for='(temp,index) in mixinsAreaList' :value="temp.name" :key='index' :label="temp.name"  @click.native='mixinsAreaChange(temp.code)'  />
        </el-select>
      </el-form-item>
      <el-form-item label="街道" prop="country" >
        <el-select v-model='queryParams.country' filterable placeholder="请选择街道(请先选择区/县)" clearable   class="w_200">
          <el-option v-for='(temp,index) in mixinsStreetList' :value="temp.name" :key='index' :label="temp.name"/>
        </el-select>
      </el-form-item>
      <el-form-item label="自助服务点名称">
        <el-input v-model="queryParams.posName" placeholder="自助服务点名称"></el-input>
      </el-form-item>
      <el-form-item label="序列号">
        <el-input v-model="queryParams.serialCode" placeholder="序列号"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="状态">
          <el-option label="可用" :value="0" />
          <el-option label="禁用" :value="1" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="province"
        label="省"
        width="100">
      </el-table-column>
      <el-table-column
        prop="city"
        label="市"
        width="100">
      </el-table-column>
      <el-table-column
        prop="area"
        label="区" width="130">
      </el-table-column>
      <el-table-column
        prop="country"
        label="街道">
      </el-table-column>
      <el-table-column
        prop="detailAddress"
        label="乡镇/街道">
      </el-table-column>
      <el-table-column
        prop="posName"
        label="自助服务点名称">
      </el-table-column>
      <el-table-column
        prop="serialCode"
        label="序列号">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          {{ scope.row.status == 0 ? '可用' : '禁用' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br/>
    <el-row>
      <div style="text-align: right;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[1,10, 20, 50, 100]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
      </div>
    </el-row>

    <el-dialog title="新增自助服务点" :visible.sync="dialogFormVisible" width="700px">
      <el-form :model="form" label-width="auto" :rules="rules" ref="ruleForm">
        <el-form-item label="省" prop="province">
          <el-select v-model='form.province' filterable placeholder="请选择省" >
            <el-option label="四川省" value="四川省"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select v-model='form.city' filterable placeholder="请选择市(请先选择省)" >
            <el-option label="成都市" value="成都市"></el-option>
            <el-option label="内江市" value="内江市"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区/县" prop="area">
          <el-select v-model='form.area' filterable placeholder="请选择区/县(请先选择市)" >
            <el-option label="郫都区" value="郫都区"></el-option>
            <el-option label="锦江区" value="锦江区"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="乡镇/街道" prop="country">
          <el-select v-model='form.country' filterable placeholder="请选择乡镇/街道(请先选择区/县)" >
            <el-option label="郫筒街道" value="郫筒街道"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="detailAddress">
          <el-input v-model="form.detailAddress" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="自主服务点名称" prop="posName">
          <el-input v-model="form.posName" placeholder="请输入自主服务点名称" />
        </el-form-item>
        <el-form-item label="序列号" prop="serialCode">
          <el-input v-model="form.serialCode" placeholder="请输入序列号" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio-button :label="1">可用</el-radio-button>
            <el-radio-button :label="0">禁用</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {addPos, deletePos, listPos, updatePos} from "@/api/system/pos";
import {AreaMixins} from "@/mixins/AreaMixins";
export default {
  name: "Pos",
  mixins: [AreaMixins],
  data() {
    return {
      rules: {
        posName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      },
      queryParams: {
        pageNum:1,
        pageSize:10,
        province: '',
        city: '',
        area: '',
        detailAddress: '',
        serialCode: '',
        posName: '',
        status: 0,
      },
      tableData: [{
        province: '四川省',
        city: '成都市',
        area: '郫都区',
        country: '郫筒街道',
        detailAddress: '28号',
        serialCode: '123',
        posName: '长乐村农产品质量检测服务点',
        status: '0',
      }],
      ids: [],
      totalCount:100,
      dialogFormVisible: false,
      form: {
        id: null,
        province: null,
        city: null,
        area: null,
        country: null,
        detailAddress: null,
        posName: null,
        serialCode: null,
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      },
      formLabelWidth: '120px'
    };
  },
  created() {
    this.getList();
  },
  methods: {
    submitForm(){
      //校验表单
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          //发送给服务器
          //判断是新增还是修改
          if (this.form.id) {
            updatePos(this.form).then(response=>{
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              this.dialogFormVisible = false;
            });
          } else {
            addPos(this.form).then(response=>{
              this.$message({
                message: '新增成功',
                type: 'success'
              });
              this.dialogFormVisible = false;
            });
          }

        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //如果row.id是空的，就用this.ids
        let ids = row.id || this.ids;
        deletePos(ids).then(response=>{
          this.getList();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleUpdate(row){
      //做好业务数据隔离，再没有提交之前不能修改表单上的数据
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogFormVisible = true
    },
    handleAdd(){
      this.dialogFormVisible = true
    },
    getList(){
      //分页查询
      listPos(this.queryParams).then(response=>{
        this.tableData = response.rows;
        this.totalCount = response.total;
      })
    },
    handleSelectionChange(val) {
      //只要数组中对象的id
      this.ids = val.map(item=>item.id);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.getList();
    }
  }
};
</script>
